<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/nav.css">
  <style>
    #main .layui-container {
      margin-bottom: 15px;
      margin-top: 76px;
      border-radius: 2px;
      background-color: #fff;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
      border: 1px solid #fff;

    }
    .article-add {
      padding-top: 7.5px;
    }

    .layui-form .layui-form-label{
      width: 110px;
      padding: 8px 15px;
      height: 38px;
      line-height: 20px;
      border: 1px solid #e6e6e6;
      border-radius: 2px 0 0 2px;
      text-align: center;
      background-color: #FBFBFB;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }

    .layui-tab-title{
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="blog-header layui-bg-cyan">
		<div class="layui-container">
			<ul class="layui-nav layui-bg-cyan">
				<li class="layui-nav-item"><a href="/">
						<i class="layui-icon layui-icon-home">111首页</i>
					</a></li>
				<li class="layui-nav-item"><a href="/">Web</a></li>
				<li class="layui-nav-item"><a href="/">大数据</a></li>
				<li class="layui-nav-item"><a href="/">Java</a></li>
				<li class="layui-nav-item"><a href="/">C++</a></li>
				<li class="layui-nav-item"><a href="/">Python</a></li>
				<li class="layui-nav-item"><a href="/">更多</a></li>
			</ul>
			<ul class="layui-nav blog-user layui-bg-cyan user-alylog">
					<li class="layui-nav-item">
						<a class="user/manager" href="user/manager">个人中心</a>
						<!-- <span class="layui-badge-dot"></span> -->
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img class="user-avatar layui-nav-img" src="" alt="">
							<span class="user-name"></span>
						</a>
						<dl class="layui-nav-child">
							<dd>
								<a class="user-logout" href="/user/logout">退出登录</a>
							</dd>
						</dl>
					</li>
			</ul>
			<ul class="layui-nav blog-user layui-bg-cyan user-notlog">
				<li class="layui-nav-item"><a href="/user/login">登录</a></li>
				<li class="layui-nav-item"><a href="/user/reg">注册</a></li>
			</ul>
		</div>
  </div>
  <div id="main">
    <div class="layui-container">
      <div class="article-add layui-form">
        <div class="layui-tab layui-tab-brief" lay-filter="user">
          <ul class="layui-tab-title">
            <li class="layui-this">编辑</li>
          </ul>
          <div id="editing" class="layui-form layui-form-content">
            <div class="layui-tab-item layui-show">
              <form action="/article" method="POST">
                <div class="layui-row layui-col-space15 layui-form-item">
                  <div class="layui-col-md3">
                    <label for="" class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                      <select lay-verify="required", name="tips", lay-filter="column">
                        <option value=""></option>
                        <option value="javascript">javascript</option>
                        <option value="html">html</option>
                        <option value="css">css</option>
                        <option value="nodejs">nodejs</option>
                        <option value="react">react</option>
                        <option value="angular">angular</option>
                        <option value="vue">vue</option>                        
                      </select>
                    </div>
                  </div>
                  <div class="layui-col-md9">
                    <label for="" class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" id="L_title" class="layui-input" type="text", name="title" required="", lay-verify="required" autocomplete="off">
                    </div>
                  </div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <textarea id="article-content" style="display: none;"></textarea>
                </div>
              </form>
            </div>
          </div>
          <div class="layui-form-item">
            <button class="layui-btn" lay-filter="send" lay-submit>立即发布</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="/jquery/jquery.min.js"></script>
	<script src="/layui/layui.js"></script>
  <script src="/js/article.js"></script>
  <!-- <script>
    layui.use(['form', 'layedit', "element"], function() {
      let val = "#{logNot}";      
      const form = layui.form;
      const layedit = layui.layedit;
      const $ = layui.$

      const index = layedit.build('article-content', {
        hideTool: [
          'image' //插入图片
        ]
      }); //建立编辑器
      if(val){
        layer.alert('请先登录', (res) => {
          location.href = "/user/login"
        })
      }
      form.on("submit(send)", (res) => {
        const { tips, title } = res.field

        if(layedit.getText(index).trim().length === 0)return layer.alert("请输入内容")
        
        const data = {
          tips,
          title,
          content: layedit.getContent(index)
        }

        $.post("/article", data, (msg) => {
          if(msg.status){
            layer.alert('发表成功', (res) => {
              location.href = "/"
            })
          }else{
            layer.alert(`发表失败，失败信息：${msg.msg}`)
          }
        })
      })
    });
  </script> -->
</body>
</html>
<!-- extends ./layout/layout

block css
  style.
    

block contents
  #main
    .layui-container
      .article-add.layui-form
        .layui-tab.layui-tab-brief(lay-filter="user")
          ul.layui-tab-title
            li.layui-this 编辑
          #editing.layui-form.layui-form-content
            .layui-tab-item.layui-show
              form(action="/article", method="POST")
                .layui-row.layui-col-space15.layui-form-item
                  .layui-col-md3
                    label.layui-form-label 分类
                    .layui-input-block
                      select(lay-verify="required", name="tips", lay-filter="column")
                        option
                        option(value="javascript") javascript
                        option(value="html") html
                        option(value="css") css
                        option(value="nodejs") node.js
                        option(value="react") react.js
                        option(value="angular") angular.js
                        option(value="vue") vue.js
                  .layui-col-md9
                    label(for="L_title").layui-form-label 标题
                    .layui-input-block
                      input(type="text", name="title" required="", lay-verify="required" autocomplete="off")#L_title.layui-input
                .layui-form-item.layui-form-text
                  textarea(style="display: none;")#article-content

          .layui-form-item
            button(lay-filter="send" lay-submit).layui-btn 立即发布
          


          

block scripts
  script.
    layui.use(['form', 'layedit', "element"], function() {
      let val = "#{logNot}";      
      const form = layui.form;
      const layedit = layui.layedit;
      const $ = layui.$

      const index = layedit.build('article-content', {
        hideTool: [
          'image' //插入图片
        ]
      }); //建立编辑器
      if(val){
        layer.alert('请先登录', (res) => {
          location.href = "/user/login"
        })
      }
      form.on("submit(send)", (res) => {
        const { tips, title } = res.field

        if(layedit.getText(index).trim().length === 0)return layer.alert("请输入内容")
        
        const data = {
          tips,
          title,
          content: layedit.getContent(index)
        }

        $.post("/article", data, (msg) => {
          if(msg.status){
            layer.alert('发表成功', (res) => {
              location.href = "/"
            })
          }else{
            layer.alert(`发表失败，失败信息：${msg.msg}`)
          }
        })
      })
    }); -->